<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0
    }

    ::-webkit-scrollbar {
        width: 0px;
    }

    body {
        background: #eeeeee
    }

    .main {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 900px;
        height: 90%;
        margin: auto;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 5px;
        background: #fff;
    }

    .main #loading {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        color: #1990ff;
        display: none;
        justify-content: center;
        font-size: 20px;
        align-items: center;
        background: rgba(0, 0, 0, 0.8);

    }

    /**搜索**/
    .search {
        width: 100%;
        display: flex;
    }

    .search #search-text {
        width: 100%;
        height: 30px;
        border: 2px solid #1990ff;
        border-right: 0px;
        outline: none;
    }

    .search .btn_search {
        background: #1990ff;
        width: 100px;
        height: 34px;
        color: white;
        border: none;
        outline: none;
    }

    /*列表*/
    #list {
        position: relative;
        width: 100%;
        height: 700px;
        overflow: auto;
    }

    #list .no-list {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        font-size: 20px;
        align-items: center;
    }

    #list .list-item {
        padding: 25px 0;
        box-sizing: border-box;
    }

    #list .list-item .title {
        color: #1d2129;
        font-weight: bold;
        line-height: 30px;
    }

    #list .list-item .content {
        color: rgba(29, 33, 41, 0.7);
        line-height: 25px;
    }
</style>
<body>
<div class="main">
  <div id="loading">Loading</div>
  <div class="search">
    <input type="text" id="search-text" value="" onkeypress="searchEnter(event)"/>
    <button class="btn_search" onclick="searchBtn()">Search</button>
  </div>
  <div id="list"></div>
</div>
</script>

<script>
    let list = [
        {listName: '试测支之音', listContent: '油半则斯具传目义满易切政化多。离美难小来离易且证具已或引小除每。立用价开知长在打压产矿当只，强色根华与青文群习金据劳习。'},
        {listName: '测测增政工', listContent: '温消低况题此基程统例任定石话所。低已存此段车收其上性维战界斗层。些王当公电被才头得期学革组。众工段离小始响史周书专政。决受水效南议何许样不新本基领。'},
        {listName: '测试三状各', listContent: '即活命角上不信通间建空过去值。布史值要少张时制火土件算八常气程消。象改品这由意我种把及太对形任片。且意种开个最但技力所物题院细不林。器照位住离没族状次由华解叫。如专圆说划身求六织受书党军生。'},
        {listName: '试测相选论', listContent: '区己家实也包须机近形路百社存。易小上入见连识体现面运定。心达广加线习实周资与流型来结压院。代图采很气阶建区党厂心该务。划农养改而只济间节区单备团名。'},
        {listName: '测试体规然', listContent: '只变太点个般华织将交决整非计。月院温领己有高油写准声变济。作以加运成油则克十江斗据管快号线。反但识术消济识你火劳这种满维其需没。将天所劳没象布他不治动快效。命地认象之都向反第提人华了列史风。这建难导外斯理热结运入八离。'},
        {listName: '试试把花维', listContent: '太说意为火种儿每就性手影太了头学间。并放发设气达间里难经都并名。走育马包去因证分建克切族题况。展书克少持电命接九十南般众联。产立选从件线说样件国应教真石今。'},
        {listName: '试测支之音1', listContent: '油半则斯具传目义满易切政化多。离美难小来离易且证具已或引小除每。立用价开知长在打压产矿当只，强色根华与青文群习金据劳习。'},
        {listName: '测测增政工1', listContent: '温消低况题此基程统例任定石话所。低已存此段车收其上性维战界斗层。些王当公电被才头得期学革组。众工段离小始响史周书专政。决受水效南议何许样不新本基领。'},
        {listName: '测试三状各1', listContent: '即活命角上不信通间建空过去值。布史值要少张时制火土件算八常气程消。象改品这由意我种把及太对形任片。且意种开个最但技力所物题院细不林。器照位住离没族状次由华解叫。如专圆说划身求六织受书党军生。'},
        {listName: '试测相选论1', listContent: '区己家实也包须机近形路百社存。易小上入见连识体现面运定。心达广加线习实周资与流型来结压院。代图采很气阶建区党厂心该务。划农养改而只济间节区单备团名。'},
        {listName: '测试体规然1', listContent: '只变太点个般华织将交决整非计。月院温领己有高油写准声变济。作以加运成油则克十江斗据管快号线。反但识术消济识你火劳这种满维其需没。将天所劳没象布他不治动快效。命地认象之都向反第提人华了列史风。这建难导外斯理热结运入八离。'},
        {listName: '试试把花维1', listContent: '太说意为火种儿每就性手影太了头学间。并放发设气达间里难经都并名。走育马包去因证分建克切族题况。展书克少持电命接九十南般众联。产立选从件线说样件国应教真石今。'},
    ]
    let cur = 0, step = 6
    //回车搜索框
    const searchEnter = (e) => {
        if (e.keyCode == 13) {
            searchList(document.getElementById('search-text').value)
        }
    }

    //点击搜索按钮
    const searchBtn = () => searchList(document.getElementById('search-text').value)

    //搜索列表
    const searchList = (name) => {
        document.getElementById('loading').style.display = 'flex'
        document.getElementById('list').innerHTML=''
        cur = 0
        setTimeout(() => {
            let reg = new RegExp(['', ...name, ''].join('.*'))
            let data = list.filter(item => reg.test(item.listName))
            data.length>0? renderList(data):document.getElementById('list').innerHTML = `<div class="no-list">查无数据</div>`;
            document.getElementById('loading').style.display = 'none'
        }, 2000)
    }
    //渲染列表
    const renderList = (list) => {
            for (let i = cur; i < cur + step; i++) {
                if (list[i]) {
                    document.getElementById('list').appendChild(renderListItem(list[i]))
                } else {
                    break;
                }
            }
            cur += step
    }
    const renderListItem = (item) => {
        const aItem = document.createElement("div");
        const inner = `<div class="list-item"><div class="title">${item.listName}</div><div class="content">${item.listContent}</div></div>`
        aItem.innerHTML = inner
        return aItem
    }
    document.getElementById('list').addEventListener("scroll", function () {
        const scrollTop = this.scrollTop
        const scrollHeight = this.scrollHeight
        const height = this.offsetHeight
        if ((scrollTop + height) === scrollHeight) {
            renderList(list)
        }
    })
    renderList(list)
</script>
</body>
</html>
